<template>
	<view class="index">
		<u-navbar :background="background" back-icon-color="#FFF" title-color="#fff" title-size="32" :border-bottom="false"></u-navbar>
		<view class="bg">
			<image src="../../static/images/bg7@2x.png"></image>
		</view>
		<view class="u-flex  u-row-center">
			<u-loading mode="flower" :show="show_loading"></u-loading>
		</view>
		<view class="index-content u-flex u-flex-col u-row-center u-skeleton">
			<!-- 顶部tabs -->
			<view class="fix-top u-skeleton-fillet">
				<view class="fix-navs u-flex u-col-center">
					<view class="" style="width: 100%;height: 80rpx;">
						<!-- <u-tabs :list="list" bar-width="94" bar-height="4" active-color="#F5B340" :bold="false" font-size="28" :current="current" @change="change"></u-tabs> -->
						<u-tabs :list="list" :is-scroll="false" bar-width="94" bar-height="4" active-color="#F5B340" :bold="false"
						 font-size="32" :current="current" @change="change"></u-tabs>
					</view>
				</view>
			</view>
			<!-- 排序：最新  即将成团 -->
			<view class="group-sort u-flex u-col-center u-margin-top-36 u-font-36 u-skeleton-fillet">
				<view :class="[collages_state==1?'bg-F5B340':'']" class="sort-item u-flex-6 " data-state="1" @click="changeState">最新</view>
				<view :class="[collages_state==2?'bg-F5B340':'']" class="sort-item u-flex-6" data-state="2" @click="changeState">即将成团</view>
			</view>
			<view class="scroll-box u-margin-top-40">
				<view class="u-padding-top-30 u-skeleton-fillet" v-if="!collages_list.length">
					<u-empty text="暂无数据" mode="list" :show="collages_list.length == 0"></u-empty>
				</view>
				<scroll-view scroll-y="true" style="height: 100%;" @scrolltolower="onreachBottom" v-else>
					<view class="item u-flex u-flex-col u-row-center u-margin-bottom-22" v-for="(item,index) in collages_list" :key="item.id">
						<view class="item-top">
							<view class="period color-FFFFFF u-font-28">第{{item.stage}}期</view>
							<image class="item-top-bg" src="../../static/images/bg6@2x.png" mode=""></image>
						</view>
						<view class="u-flex u-col-center u-row-between item-center">
							<view class="u-flex u-col-center">
								<view class="group-img u-margin-right-22">
									<image :src="item.goods_avatar" mode=""></image>
								</view>
								<view class="u-flex u-col-bottom">
									<text class="u-font-28 color-F78A41">￥</text>
									<view class="color-F78A41 u-font-40">{{item.price}}</view>
								</view>
							</view>
							<view class="u-flex u-flex-col u-row-center">
								<view class="avatar-icon">
									<image :src="item.farmer_avatar" mode=""></image>
								</view>
								<view class="u-font-22">团长ID：{{item.farmer_id}}</view>
							</view>
						</view>
						<view class="u-flex u-col-center u-row-between item-bottom u-margin-top-20">
							<view class="u-flex u-col-center">
								<view class="line-progress">
									<u-line-progress active-color="#F78A41" :percent="item.progress" height="20" :show-percent="false" striped
									 striped-active></u-line-progress>
								</view>
								<view class="u-font-28 color-999999">{{item.current_num}}/{{item.limit_num}}人</view>
							</view>
							<view class="join u-font-28">
								<u-button :custom-style="customStyle" hover-class="none" @click="toDetail(item.id)">{{current===2?"抢饲料":"参于抢鸡"}}</u-button>
							</view>
						</view>
					</view>
					<u-loadmore :status="status" @loadmore="onreachBottom" />
				</scroll-view>
			</view>
			<view class="bottom-btns color-FFFFFF u-flex u-col-center u-row-around u-margin-top-60">
				<view class="btns-item u-skeleton-fillet" v-if="vuex_is_farmer !==0" @click="sendGroupMask = true">立即发团</view>
				<view class="btns-item u-skeleton-fillet" @click="toggleGroupMadal">升级农场主</view>
			</view>
		</view>
		<group-madal v-if="isGroupMadal" @toggleGroupMadal="toggleGroupMadal"></group-madal>
		<wx-login-madal v-if="isAuthorization"></wx-login-madal>
		<!-- 发团弹窗 -->
		<u-mask :show="sendGroupMask" @click="hideSendGroupMask">
			<view class="send-group-madal" @click.stop>
				<image src="../../static/images/icon_close@2x.png" mode="" @click="hideSendGroupMask" class="close-icon"></image>
				<view class="u-font-32 color-999999 u-margin-top-26">
					<view class="">
						<view class="" @click.stop @click="groupListShow=true">
							<u-field v-model="groupTypeLable" label="开团类型" placeholder="请选择开团类型" :disabled="true" required></u-field>
						</view>
						<view class="" @click.stop>
							<u-field v-model="groupNumber" label="人数" placeholder="请填写开团人数,如:10" required></u-field>
						</view>
					</view>
				</view>
				<view class="u-flex u-col-center u-row-around u-margin-top-60" style="width: 100%;">
					<u-button :custom-style="customStyle2" hover-class="none" @click="hideSendGroupMask">取消</u-button>
					<u-button :custom-style="customStyle3" hover-class="none" @click="sendGroup">立即发团</u-button>
				</view>
			</view>
		</u-mask>
		<u-select v-model="groupListShow" :list="groupList" @confirm="confirm" label-name="name" value-name="id"></u-select>
		<!--引用组件-->
		<u-skeleton :loading="loading" :animation="true" bgColor="#FFF"></u-skeleton>
	</view>
</template>

<script>
	import GroupMadal from '../../components/groupMadal/groupMadal.vue'
	let meta = {
		current_page: 0,
		per_page: 15
	}
	let tabindex = 0
	export default {
		data() {
			return {
				groupType: "",
				groupTypeLable: "",
				groupNumber: '',
				background: {},
				customStyle: {
					width: '140rpx',
					height: '50rpx',
					background: 'rgba(253,181,68,1)',
					borderRadius: '10rpx',
					color: "#FFFFFF",
				},
				list: [{
					name: '养鸡'
				}, {
					name: '蛋鸡'
				}, {
					name: '饲料'
				}],
				groupList: [{
						value: '1',
						label: '肉鸡'
					},
					{
						value: '2',
						label: '蛋鸡'
					}
				],
				groupListShow: false,
				loading:true,
				current: 0,
				isGroupMadal: false,
				collages_state: 1,
				collages_list: [],
				status: "loadmore",
				show_loading: false,
				isAuthorization: false,
				sendGroupMask: false,
				customStyle2: {
					width: "200rpx",
					height: "70rpx",
					background: "rgba(189,189,189,1)",
					border: "4rpx solid rgba(149,149,149,1)",
					borderRadius: "20rpx",
				},
				customStyle3: {
					width: "200rpx",
					height: "70rpx",
					background: "rgba(245,179,64,1)",
					border: "4rpx solid rgba(204,126,43,1)",
					borderRadius: "20rpx",
					color: "#FFFFFF"
				}
			};
		},
		onLoad(options) {
			tabindex = !options.tabindex?0:options.tabindex
			this.checkWXAuthorization()
		},
		onReady() {
			uni.showLoading({
				mask: true,
				title: "数据加载中..."
			})
			this.getGoodsList(1)
			this.getGoodsList(2)
		},
		onPullDownRefresh() {
			this.show_loading = true;
			meta.current_page = 0;
			uni.showLoading({
				mask: true,
				title: "数据加载中..."
			})
			this.status = "loadmore"
			this.collages_list = []
			this.getCollages()
		},
		methods: {
			confirm(e) {
				console.log(e);
				this.groupType = e[0].value
				this.groupTypeLable = e[0].label
			},
			hideSendGroupMask(){
				this.sendGroupMask = false;
				this.groupNumber="";
				this.groupTypeLable=''
			},
			sendGroup() {
				let reg = /^[1-9]\d*$/
				if (this.groupType === "") {
					this.$u.toast("请选择开团类型！")
					return false
				}
				if (!reg.test(this.groupNumber) && Number(this.groupNumber)<2) {
					this.$u.toast("请输入大于2的整数")
					return false
				}
				uni.showLoading({
					mask: true
				})
				this.postSendGroup();
			},
			checkWXAuthorization() {
				// console.log(this.$u.vuex('vuex_version'))
				if (!this.vuex_token) {
					this.isAuthorization = true
				} else {
					this.isAuthorization = false
				}
			},
			change(index) {
				meta.current_page = 0;
				this.collages_state = 1;
				this.current = index;
				this.collages_list = []
				this.status = "loadmore"
				uni.showLoading({
					mask: true,
					title: "数据加载中..."
				})
				this.getCollages()
			},
			toggleGroupMadal() {
				if (this.isAuthorization) {
					this.$u.toast("请先登录")
					return false
				}
				this.isGroupMadal = !this.isGroupMadal
			},
			getCategoryArr() {
				let params = {
					from: 1
				}
			},
			toDetail(goodsid) {
				uni.navigateTo({
					url: "../goodsdetail/goodsdetail?goods_id=" + goodsid
				})
			},
			changeState(e) {
				console.log(e)
				if (this.collages_state === e.currentTarget.dataset.state) {
					return false
				}
				uni.showLoading({
					mask: true,
					title: "数据加载中..."
				})
				this.status = "loadmore"
				this.collages_state = e.currentTarget.dataset.state
				meta.current_page = 0;
				this.collages_list = []
				this.getCollages()
			},
			onreachBottom() {
				if (meta.total_pages === meta.current_page) {
					this.status = 'nomore'
					return false
				}
				this.status = 'loading';
				this.getCollages();
			},
			postSendGroup() {
				let params = {
					goods_id: this.groupType,
					num: this.groupNumber
				}
				this.$u.api.sendCollages(params).then(res => {
					uni.hideLoading()
					if (res.errno === "000") {
						this.hideSendGroupMask()
						this.$u.toast(res.errmsg)
						uni.navigateTo({
							url:"../goodsdetail/goodsdetail?goods_id="+res.result.data.id
						})
					} else {
						this.$u.toast(res.errmsg)
					}

				}).catch(err => {
					console.log(err)
				})
			},
			getCollages() {
				let params = {
					type: this.list[this.current].id,
					state: this.collages_state,
					page: meta.current_page + 1,
					page_size: meta.per_page
				}
				this.$u.api.getCollages(params).then(res => {
					uni.hideLoading()
					this.loading = false
					if (this.show_loading) {
						uni.stopPullDownRefresh()
					}
					if (res.errno === "000") {
						res.result.data.forEach(el => {
							this.collages_list.push(el)
						})
						meta = res.result.meta
					} else {
						this.status = 'nomore';
					}
					this.show_loading = false
				}).catch(err => {
					console.log(err)
				})
			},
			getGoodsList(type) {
				// *type = 要获取的商品类别(1可参团列表2可开团列表)
				let params = {
					type:type
				}
				this.$u.api.getGoodsType(params).then(res => {
					uni.hideLoading()
					if(type ===1 && res.errno === "000"){
						this.list = res.result.data
						this.current = tabindex
						this.getCollages();
					}else if(type ===2 && res.errno === "000"){
						this.groupList = res.result.data
					}
				}).catch(err => {
					console.log(err)
				})
			}
		},
		onUnload() {
			meta.current_page = 0
			tabindex = 0
		},
		components: {
			GroupMadal
		}
	};
</script>

<style>
	.index {
		background: rgb(241, 245, 246);
		height: 100vh;
	}

	.bg {
		position: fixed;
		top: -44px;
		z-index: 1;
		width: 100%;
		height: 324rpx;
	}

	.bg image {
		width: 100%;
		height: 100%;
		display: flex;
	}

	.fix-top {
		width: 100%;
	}

	.fix-navs {
		width: 100%;
		height: 140rpx;
		background: #ffffff;
		border-radius: 20rpx;
		margin: 0 auto;
		overflow: hidden;
	}

	.index-content {
		width: 700rpx;
		position: relative;
		top: 40rpx;
		z-index: 3;
		margin: 0 auto;
	}

	.group-sort {
		width: 500rpx;
		height: 80rpx;
		background: rgba(255, 255, 255, 1);
		border: 1px solid rgba(245, 179, 64, 1);
		border-radius: 40rpx;
		overflow: hidden;
	}

	.sort-item {
		height: 100%;
		line-height: 80rpx;
		text-align: center;
	}

	.scroll-box {
		width: 700rpx;
		height: 53vh;
	}

	.btns-item {
		width: 240rpx;
		height: 70rpx;
		background: rgba(245, 179, 64, 1);
		border: 4rpx solid rgba(204, 126, 43, 1);
		border-radius: 20rpx;
		text-align: center;
		line-height: 72rpx;
	}

	.bottom-btns {
		width: 100%;
	}

	.item {
		width: 700rpx;
		mih-height: 232rpx;
		background: rgba(255, 255, 255, 1);
		border: 4rpx solid rgba(247, 138, 65, 1);
		border-radius: 20rpx;
		padding-bottom: 24rpx;
		box-sizing: border-box;
	}

	.item-top {
		display: inline-block;
		position: relative;
		padding: 0 64rpx;
		box-sizing: border-box;
		z-index: 2;
		top: -6rpx;
	}

	.period {
		position: relative;
		z-index: 1;
		line-height: 40rpx;
	}

	.item-top image {
		width: 100%;
		height: 40rpx;
		position: absolute;
		z-index: -1;
		top: 0;
		left: 0;
		display: flex;
	}

	.group-img {
		width: 90rpx;
		height: 90rpx;
		background: rgba(162, 229, 216, 1);
		border: 4rpx solid rgba(253, 181, 68, 1);
		border-radius: 50%;
		overflow: hidden;
	}

	.avatar-icon {
		width: 80rpx;
		height: 80rpx;
		border: 4rpx solid rgba(253, 181, 68, 1);
		border-radius: 50%;
		overflow: hidden;
	}

	.item image {
		width: 100%;
		height: 100%;
	}

	.item-center,
	.item-bottom {
		width: 100%;
		padding: 0 32rpx;
		box-sizing: border-box;
	}

	.line-progress {
		width: 330rpx;
	}

	.send-group-madal {
		width: 580rpx;
		height: 520rpx;
		background: rgba(255, 255, 255, 1);
		border: 4rpx solid rgba(167, 92, 26, 1);
		border-radius: 20rpx;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		overflow: hidden;
		text-align: center;
		padding-top: 52rpx;
		box-sizing: border-box;
	}

	.close-icon {
		width: 148rpx;
		height: 140rpx;
		position: absolute;
		right: -68rpx;
		top: -60rpx;
	}
</style>
